<template>
	<view class="page">
		<!-- 订单状态 -->
	<!-- 	<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text>待付款</text>
			</view>
			<view class="reason">
				<text>剩余12分68秒</text>
			</view>
		</view> -->
		<!-- 收货地址 -->
		<view class="shipping-address">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{info.uname}}</text>
				<text>{{info.tel}}</text>
			</view>
			<view class="address">
				<text>{{info.address}} {{info.address_sub}}</text>
			</view>
		</view>
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in 1" :key="index">
					<view class="thumb">
						<image :src="info.imglogo" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{info.title}}</text>
						</view>
						<view class="num-size">
							<text>数量：{{info.num}}</text>
							<!-- <text>颜色：黑色,XL,全国联保</text> -->
						</view>
						<view class="price">
							<text>￥{{info.total_price}}</text>
						</view>
					<!-- 	<view class="order-btn">
							<view class="btn" @click="onApplyAftersales">
								<text>申请售后</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
		<!-- 	<view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view> -->
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单编号:</view>
					<view class="content">
						<text>{{info.order_sn}}</text>
						<text class="btn">复制</text>
					</view>
				</view>
				<view class="list">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{info.create_time}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">在线支付:</view>
					<view class="content">
						<text>{{info.pay_type_text}}</text>
					</view>
				</view>
				<!-- <view class="list" v-if="info.pay_price>0">
					<view class="title">在线支付:</view>
					<view class="content">
						<text>微信支付</text>
					</view>
				</view> -->
				<view class="list">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>普通快递</text>
					</view>
				</view>
				<!-- <view class="list">
					<view class="title">配送日期:</view>
					<view class="content">
						<text>2020-11-11</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>商品总额</text>
					</view>
					<view class="price" style="text-align: right;">
						<text>￥{{info.total_price}}</text><br><text v-if="info.points">魅力值：-￥{{info.points}}</text>
					</view>
				</view>
				<!-- <view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text>+￥20.00</text>
					</view>
				</view> -->
				<view class="list action">
					<view class="title">
						<text>实付款：</text>
					</view>
					<view class="price">
						<text>￥{{info.pay_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-btn">
			<view class="del" v-if="info.status==1" @tap.stop="cancel(info.id,1)">
				
				
				<text>取消订单</text>
			</view>
			<view class="btn" v-if="info.status==0"  @tap.stop="confirmmeet(info.id,1)">
				
				<text class="action">确认付款</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				info:{}
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getOrderDetails()
		},
		methods:{
			// 付款
			confirmmeet(id,item){
				let _this = this
				uni.login({
					success: function(res) {
						console.log('uni.logo')
						//魅力值抵扣
						_this.$u.api.ordersPay({
							order_id:id,
							code: res.code
						})
						.then(res=>{
							console.log(res,'registerorder_create');
							let result = res.msg
							if(res.status){
								// 支付成功的回调中 创建绘本馆成功
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 1500,
									success(){
										console.log('success')
										uni.redirectTo({
											url: '/pages/PayResult/PayResult',
										})
										
									}
								});
							}else if(res.code==-7){
								//微信支付
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.msg.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
									nonceStr: res.msg.nonceStr, // 随机字符串，长度为32个字符以下
									package: res.msg.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
									signType:res.msg.signType, //签名算法，暂支持 MD5
									paySign:  res.msg.paySign, // 签名
									success: function (res) {
										// 支付成功的回调中 创建绘本馆成功
										uni.showToast({
											title: '微信支付成功',
											icon: 'success',
											duration: 1500,
											success(){
												uni.redirectTo({
													url: '/pages/PayResult/PayResult',
												})
												
											}
										});
										
										
									},
									fail: function (err) {
										// 支付失败的回调中 用户未付款
										uni.showToast({
											title: '支付取消',
											duration: 1500,
											image: '/static/png/error_icon.png',
											success: function(){
												uni.navigateBack()
												
											}
										});
									}
								});
								
							}else{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							}
							
						})
					}
						
				})
			},
			// 取消订单
			cancel(para,index) {
				uni.showModal({
					title: '温馨提醒',
					confirmText: "确定取消",
					content: "确定要取消该订单吗？",
					success: res => {
						if (res.confirm) {
							this.$u.api.ordersCancel({
									order_id: para
								})
								.then(res => {
									console.log(res);
									uni.showToast({
										icon: 'none',
										title: res.msg
									})
									if (res.status) {
										uni.navigateBack()
									}
								})
								.catch(err => {
									console.log(err);
								})
						}
					}
				})
			},
			// 订单详情
			getOrderDetails(){
				this.$u.api.ordersInfo({order_id:this.id}).then(res => {
					if (res.status) {
						this.info = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
</style>
